<template>
  <div class="container" v-if="editAuth">
    <!-- 头部 -->
    <page-header :title="$route.query.id ? $t('m.branch_Edit') : $t('m.branch_Create')">
    </page-header>

    <!--容器-->
    <div class="detail_div">
      <div class="detail_left">
        <div class="detail_left_div">
          <el-form
            label-position="top"
            ref="form1"
            :model="form"
            :rules="rules"
          >
            <div class="create_title2">
              {{$t('m.invite_Type')}}<span style="color:#fd5749">*</span>
            </div>
            <el-form-item prop="type">
              <el-select
                v-model="form.type"
                :placeholder="$t('m.pleaseChoose')"
                style="width:100%"
                filterable
              >
                <el-option
                  v-for="item in $dict.helpCenter.type"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <div class="create_title2">
              {{ $t('m.settingHelpCenterQuestionTitleSet')
              }}<span style="color:#fd5749">*</span>
            </div>
            <div class="create_title4" style="color:#646b80;">
              {{ $t('m.settingHelpCenterQuestionTitleSetHint') }}
            </div>
            <div class="create_title4">Tiếng Việt</div>
            <el-form-item prop="title.vi">
              <el-input
                v-model="form.title.vi"
                :placeholder="$t('m.Please_enter')"
                :maxlength="100"
                clearable
              />
            </el-form-item>
            <div class="create_title4">English</div>
            <el-form-item prop="title.en">
              <el-input
                v-model="form.title.en"
                :placeholder="$t('m.Please_enter')"
                :maxlength="100"
                clearable
              />
            </el-form-item>
            <div class="create_title4">简体中文</div>
            <el-form-item prop="title.zh">
              <el-input
                v-model="form.title.zh"
                :placeholder="$t('m.Please_enter')"
                :maxlength="100"
                clearable
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="detail_right">
        <div class="detail_left_div">
          <el-form
            label-position="top"
            ref="form2"
            :model="form"
            :rules="rules"
          >
            <div class="create_title2">
              {{ $t('m.settingHelpCenterAnswerSet')
              }}<span style="color:#fd5749">*</span>
            </div>
            <div class="create_title4">Tiếng Việt</div>
            <el-form-item prop="content.vi">
              <el-input
                v-model="form.content.vi"
                :placeholder="$t('m.Please_enter')"
                type="textarea"
                :rows="6"
                :maxlength="500"
                show-word-limit
                clearable
              />
            </el-form-item>
            <div class="create_title4">English</div>
            <el-form-item prop="content.en">
              <el-input
                v-model="form.content.en"
                :placeholder="$t('m.Please_enter')"
                type="textarea"
                :rows="6"
                :maxlength="500"
                show-word-limit
                clearable
              />
            </el-form-item>
            <div class="create_title4">简体中文</div>
            <el-form-item prop="content.zh">
              <el-input
                v-model="form.content.zh"
                :placeholder="$t('m.Please_enter')"
                type="textarea"
                :rows="6"
                :maxlength="500"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="create_button">
      <el-button class="el_button" @click="submit()" type="primary">{{
        $route.query.id ? $t('m.save') : $t('m.branch_Create')
      }}</el-button>
    </div>
  </div>
</template>
<script>

export default {
  mixins: [],
  data () {
    return {
      // 表单
      form: {
        id: '',
        type: '',
        title: {
          vi: '',
          en: '',
          cn: ''
        },
        content: {
          vi: '',
          en: '',
          cn: ''
        }
      },
      // 表单校验规则
      rules: {
        type: [
          { required: true, message: this.$t('m.Please_select_type'), trigger: 'change' }
        ],
        'title.vi': [
          { required: true, message: this.$t('m.Please_enter_title'), trigger: 'blur' }
        ],
        'title.en': [
          { required: true, message: this.$t('m.Please_enter_title'), trigger: 'blur' }
        ],
        'title.zh': [
          { required: true, message: this.$t('m.Please_enter_title'), trigger: 'blur' }
        ],
        'content.vi': [
          { required: true, message: this.$t('m.Please_enter_content'), trigger: 'blur' }
        ],
        'content.en': [
          { required: true, message: this.$t('m.Please_enter_content'), trigger: 'blur' }
        ],
        'content.zh': [
          { required: true, message: this.$t('m.Please_enter_content'), trigger: 'blur' }
        ]
      },
      editAuth: this.permissionsId(154)
    }
  },
  created () {
    if (this.$route.query.id && this.editAuth) {
      this.getDetail()
    }
  },
  methods: {
    // 获取编辑信息
    getDetail () {
      this.$api.helpCenter.getDetail(this.$route.query.id).then(res => {
        if (this.$ok(res)) {
          this.$util.assignOnlyTarget(this.form, res.data)
        }
      })
    },
    // 提交
    async submit () {
      try {
        await Promise.all([
          this.$refs.form1.validate(),
          this.$refs.form2.validate()
        ])
        this.$openLoading()
        this.$api.helpCenter.createModify(this.form).then(res => {
          this.$closeLoading()
          if (this.$ok(res)) {
            this.$message.success(res.message)
            this.back()
          } else {
            this.$message.error(res.message)
          }
        })
      } catch (error) {
        // 验证失败
        // console.log('error submit!!')
        return
      }
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  min-width: 1000px !important;
  // max-width: 1000px !important;

  .page-header {
    padding: 20px 0;
  }

  .page-header,
  .detail_div {
    width: 100% !important;
    min-width: 1000px !important;
    max-width: 1000px !important;
  }

  .detail_div {
    margin: 0 !important;
  }

  .detail_left_div {
    padding-bottom: 20px;
    margin-top: 0;
    ::v-deep .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
  }
}
.create_button {
  margin-top: 20px;
  display: flex;
  justify-content: end;
  width: 100%;
  min-width: 1000px;
  max-width: 1000px;
  z-index: 20;
  position: relative;
  .el_button {
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 16px;
    border: none;
    padding: 10px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 1221px) {
  .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
